<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">



</head>
<body>


<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" style="margin-left: 0;">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Simple Tables
            <small>preview of simple tables</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Tables</a></li>
            <li class="active">Simple</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Bordered Table</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">

                        <button type="button" class="btn btn-success btn-sm pull-right"
                                data-toggle="modal" data-target="#myModal" style="margin: 0 20px 10px 0;">新增学生
                        </button>




                        <table class="table table-bordered" id="stuTable">

                        </table>
                    </div>
                    <!-- /.box-body -->

                </div>
                <!-- /.box -->

            </div>
            <!-- /.col -->

        </div>

    </section>
    <!-- /.content -->
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">学生信息</h4>
            </div>
            <form role="form"  method="post" id="stuForm">
                <div class="modal-body">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="name">学号</label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="请输入学号" required minlength="10" maxlength="10">
                        </div>
                        <div class="form-group">
                            <label for="trueName">姓名</label>
                            <input type="text" class="form-control" id="trueName" name="trueName" placeholder="请输入姓名" required minlength="2" maxlength="20">
                        </div>
                        <div class="form-group">
                            <label for="sex">性别</label>
                            <select id="sex" name="sex" class="form-control">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="birthday">出生日期</label>
                            <input type="date" class="form-control" id="birthday" name="birthday" placeholder="出生日期">
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <a href="#" onclick="submitStuForm();"  class="btn btn-primary">提交更改</a>
                </div>

            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>






<!-- jQuery 3 -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Slimscroll -->
<script src="/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/dist/js/demo.js"></script>

<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table-locale-all.min.js"></script>
<script src="/plugins/jqueryvalidate/jquery.validate.min.js"></script>
<script src="/plugins/jqueryvalidate/localization/messages_zh.min.js"></script>

<script type="application/javascript">

    
    function submitStuForm() {

        var paraObj=$("#stuForm").serialize();
        $.ajax({
            method: "POST",
            url: "/webapi/student/add",
            data:paraObj
        })
            .done(function( result ) {

            if(result>0){

                window.location.reload();

            }else{
                alert( "保存不成功！" );
            }

        });
        
    }
    
    function formatSex(value,row,index){

        if(value==1){
            return "男";
        }else if(value==2){
            return "女";
        }else{
            return "不详";

        }


    }



    $(function () {

        $("#stuForm").validate();

        $('#stuTable').bootstrapTable({
            url: '/webapi/student/list',         //请求后台的URL（*）
            method: 'GET',                      //请求方式（*）

            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "desc",                   //排序方式

            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 2,                       //每页的记录行数（*）
            pageList: [2,10, 25, 50, 100],        //可供选择的每页的行数（*）

            strictSearch: true,
            //showColumns: true,                  //是否显示所有的列
            //showRefresh: true,                  //是否显示刷新按钮
            //minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            //showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
                checkbox: true
            }, {
                field: 'id',
                title: '序号'
            }, {
                field: 'name',
                title: '学号'
            }, {
                field: 'trueName',
                title: '姓名'
            }, {
                field: 'sex',
                title: '性别',
                formatter:formatSex
            }, ]
        });






        
    })




</script>




</body>
</html>